<template>
  <div class="order-list">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        :finished-text="list.length > 0 ? '没有更多了' : ''"
        :immediate-check="false"
        :offset="50"
        @load="onLoad"
      >
        <div v-if="list.length === 0 && !loading" class="empty-state">
          <van-empty description="暂无相关订单" />
        </div>
        <div v-else class="order-items">
          <div v-for="(item, index) in list" :key="index" class="order-item">
            <div class="order-header">
              <span class="order-no" :style="{fontSize:userStore.userInfo.ageGroup === 1 ? '20px' : ''}">订单号：{{ item.orderNo }}</span>
              <span class="order-status" :style="{ color: orderStatusMap[item.orderStatus].color, fontSize:userStore.userInfo.ageGroup === 1 ? '25px' : ''}">
                {{ orderStatusMap[item.orderStatus].statusText }}
              </span>
            </div>
            <div class="order-content" @click="goToDetail(item)">
              <div class="hospital-info">
                <img v-if="item.serviceName==='就医陪诊'" src="../../../assets/images/jiuyipeizhen.png" class="service-image" alt="服务图片" />
                <img v-if="item.serviceName==='诊前约号'" src="../../../assets/images/zhenqianyuehao.png" class="service-image" alt="服务图片" />
                <img v-if="item.serviceName==='送取就医结果'" src="../../../assets/images/songqujieguo.png" class="service-image" alt="服务图片" />
                <img v-if="item.serviceName==='代跑取药'" src="../../../assets/images/daipao.png" class="service-image" alt="服务图片" />
                <img v-if="item.serviceName==='上门陪护'" src="../../../assets/images/shangmenpeihu.png" class="service-image" alt="服务图片" />
                <div class="service-details">
                  <h4 :style="{fontSize:userStore.userInfo.ageGroup === 1 ? '25px' : ''}">{{ item.serviceName }}</h4>
                  <p :style="{fontSize:userStore.userInfo.ageGroup === 1 ? '20px' : ''}">{{ item.hospitalName }}</p>
                </div>
              </div>
              <div class="price-info">
                <span class="price" :style="{fontSize:userStore.userInfo.ageGroup === 1 ? '35px' : ''}">{{ item.orderAmount }}</span>
              </div>
            </div>
            <div class="order-footer">
              <!-- 待付款状态 -->
              <template v-if="item.orderStatus === 1">
                <van-button  size="small" plain type="danger" @click="cancelOrder(item)" :style="{fontSize:userStore.userInfo.ageGroup === 1 ? '20px' : ''}">取消订单</van-button>
                <van-button size="small" plain  @click="updateOrder(item)" :style="{fontSize:userStore.userInfo.ageGroup === 1 ? '20px' : ''}">修改订单</van-button>
                <van-button type="primary" size="small" @click="showPayOrder(item)" :style="{fontSize:userStore.userInfo.ageGroup === 1 ? '20px' : ''}">立即支付</van-button>
              </template>
              <!-- 待服务状态 -->
              <template v-if="item.orderStatus === 2">
                <van-button  size="small" @click="makeCall(item)" :style="{fontSize:userStore.userInfo.ageGroup === 1 ? '20px' : ''}">联系专员</van-button>
                <van-button type="primary" size="small" @click="ompleteOrder(item)" :style="{fontSize:userStore.userInfo.ageGroup === 1 ? '20px' : ''}">完成服务</van-button>
              </template>
              <!-- 已完成状态 -->
              <template v-if="item.orderStatus === 3">
                <van-button plain  size="small" type="danger" @click="deleteOrder(item)" :style="{fontSize:userStore.userInfo.ageGroup === 1 ? '20px' : ''}">删除订单</van-button>
                <van-button plain  size="small" @click="goToEvaluate(item)" :style="{fontSize:userStore.userInfo.ageGroup === 1 ? '20px' : ''}">去评价</van-button>
                <van-button type="primary" size="small" @click="goToDetail(item)" :style="{fontSize:userStore.userInfo.ageGroup === 1 ? '20px' : ''}">查看服务</van-button>
              </template>
              <!-- 已取消状态不显示任何按钮 -->
              <template v-if="item.orderStatus === 4">
                <van-button plain  size="small" type="danger" @click="deleteOrder(item)" :style="{fontSize:userStore.userInfo.ageGroup === 1 ? '20px' : ''}">删除订单</van-button>
              </template>
            </div>
          </div>
        </div>

          <!-- 支付密码弹框 -->
        <van-popup v-model:show="showPayPassowrd" position="bottom">
              <div class="pay-title">请输入支付密码</div>
              <div class="pay-title-tip">向{{orderHospitalName}}转账</div>
              <h1 style="text-align:center">¥{{ orderAmount }}</h1>
                  <!-- 密码输入框 -->
               <van-password-input
                :value="payPassword"
                 :focused="showKeyboard"
                style="margin-bottom: 500px;"
               @focus="showKeyboard = true"
              />
                <!-- 数字键盘 -->
              <van-number-keyboard
               v-model="payPassword"
              :show="showKeyboard"
               @blur="showKeyboard = false"
              />
        </van-popup>

        <van-dialog v-model:show="showEvaluate"  title="评价" @confirm="onSubmitEvaluate">
        <van-cell-group inset>
          <van-field
            v-model="evaluate"
            rows="2"
            autosize
            label="评价"
            type="textarea"
            maxlength="100"
            placeholder="请输入评价"
            show-word-limit
        />
        </van-cell-group>
        </van-dialog>


        <van-dialog v-model:show="showUpdate" title="修改订单信息" :show-cancel-button="false" :showConfirmButton="false">
          <van-form @submit="onSubmit">
            <van-icon name="arrow-left" style="    position: relative;top: -23px;right: -17px;" @click="showUpdate = false"/>
            <!-- 服务对象信息 -->
            <van-field
            v-model="form.serviceObject"
            label="服务对象"
            placeholder="请输入服务对象"
            :rules="[{ required: true, message: '请输入服务对象' },
            {
              pattern: /^[\u4e00-\u9fa5A-Za-z]{2,10}$/, // 正则表达式校验姓名格式
              message: '姓名必须为2-10个中文字符或英文字母，且不能包含数字',
            }
          ]"
            />
            <van-field
            v-model="form.serviceObjectPhone"
            label="联系电话"
            placeholder="请输入联系电话"
            :rules="[{ required: true, message: '请输入联系电话' },
            {
            pattern: /^1[3-9]\d{9}$/, // 正则表达式校验手机号格式
            message: '请输入正确的手机号',
            }
          ]"
            />


            <!-- 就医陪诊
            <template v-if="form.serviceName ==='就医陪诊'">
            <van-field
            v-model="form.visitDate"
            label="就诊日期"
            placeholder="请输入就诊日期"
            readonly
            :rules="[{ required: true, message: '请输入就诊日期' }]"
            @click="showDatePicker = true"
            />
            <van-field
            v-model="form.visitTime"
            label="就诊时间"
            placeholder="请输入就诊时间"
            readonly
            :rules="[{ required: true, message: '请输入就诊时间' }]"
            @click="showTimePicker = true"
            />
            <van-field
            v-model="form.address"
            label="接送地址"
            placeholder="请输入接送地址"
            :rules="[{ required: true, message: '请输入接送地址' }]"
            />
            </template>

            诊前约号
            <template v-if="form.serviceName ==='诊前约号'">
            <van-field
            v-model="form.departmentName"
            label="就诊科室"
            placeholder="请输入就诊科室"
            :rules="[{ required: true, message: '请输入就诊科室' }]"
            />
            <van-field
            v-model="form.doctorName"
            label="就诊医生名字"
            placeholder="请输入就诊医生名字"
            :rules="[{ required: true, message: '请输入就诊医生名字' }]"
            />
            <van-field
            v-model="form.visitDate"
            label="就诊日期"
            placeholder="请输入就诊日期"
            readonly
            :rules="[{ required: true, message: '请输入就诊日期' }]"
            @click="showDatePicker = true"
            />
            <van-field
            v-model="form.visitTime"
            label="就诊时间"
            placeholder="请输入就诊时间"
            readonly
            :rules="[{ required: true, message: '请输入就诊时间' }]"
            @click="showTimePicker = true"
            />
            </template>

            送取就医结果
            <template v-if="form.serviceName ==='送取就医结果'">
            <van-field
            v-model="form.medicalCardNumber"
            label="就诊卡号"
            placeholder="请输入就诊卡号"
            :rules="[{ required: true, message: '请输入就诊卡号' }]"
            />
            <van-field
            v-model="form.idNumber"
            label="身份证号"
            placeholder="请输入身份证号"
            :rules="[{ required: true, message: '请输入身份证号' }]"
            />
            <van-field
            v-model="form.address"
            label="接收地址"
            placeholder="请输入接收地址"
            :rules="[{ required: true, message: '请输入接收地址' }]"
            />
            </template>

            代跑取药
            <template v-if="form.serviceName ==='代跑取药'">
            <van-field
            v-model="form.result"
            label="诊断结果"
            placeholder="请输入诊断结果"
            :rules="[{ required: true, message: '请输入诊断结果' }]"
            />
            <van-field
            v-model="form.deliveryCode"
            label="取药码"
            placeholder="请输入取药码"
            :rules="[{ required: true, message: '请输入取药码' }]"
            />
            <van-field
            v-model="form.idNumber"
            label="身份证号"
            placeholder="请输入身份证号"
            :rules="[{ required: true, message: '请输入身份证号' }]"
            />
            <van-field
            v-model="form.medicalNumber"
            label="医保卡号"
            placeholder="请输入医保卡号"
            :rules="[{ required: true, message: '请输入医保卡号' }]"
            />
            <van-field
            v-model="form.address"
            label="接收地址"
            placeholder="请输入接收地址"
            :rules="[{ required: true, message: '请输入接收地址' }]"
            />
            </template>

            上门陪护
            <template v-if="form.serviceName ==='上门陪护'">
            <van-field
            v-model="form.escortType"
            label="陪护类型"
            placeholder="请输入陪护类型"
            readonly
            @click="showEscortTypePicker = true"
            :rules="[{ required: true, message: '请输入陪护类型' }]"
            />
            <van-field
            v-model="form.address"
            label="陪护地址"
            placeholder="请输入陪护地址"
            :rules="[{ required: true, message: '请输入陪护地址' }]"
            />
            </template>

            <van-field
            v-model="form.remark"
            label="备注"
            placeholder="请输入备注"
            /> -->

            <van-button type="danger" block native-type="submit" style="width: 120px;margin: 15px auto;">
              确认修改
            </van-button>
          </van-form>
        </van-dialog>      

          <!-- 日期选择器 -->
          <van-popup v-model:show="showDatePicker" position="bottom">
            <van-date-picker
              :min-date="minDate"
              :max-date="maxDate"
              @confirm="onDateConfirm"
              @cancel="showDatePicker = false"
              title="选择就诊日期"
            />
          </van-popup>

          <!-- 时间选择器 -->
          <van-popup v-model:show="showTimePicker" position="bottom">
            <van-time-picker
              @confirm="onTimeConfirm"
              @cancel="showTimePicker = false"
              show-toolbar
              title="选择就诊时间"
            />
          </van-popup>

              <!-- 上门陪护类型选择器 -->
        <van-popup v-model:show="showEscortTypePicker" position="bottom">
            <van-picker
              :columns="escortTypeColumns"
              @confirm="onEscortTypeConfirm"
              @cancel="showEscortTypePicker = false"
              show-toolbar
              title="选择陪护类型"
            />
        </van-popup>
        
        <div v-if="loading" class="loading-text">
          加载中...
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import { showConfirmDialog } from 'vant'
import { stafflApi, hospitalApi, orderApi } from '@/api'
import { showToast, showDialog } from 'vant'
import { parseBusinessContent } from '@/utils/utils'
import { useUserStore } from '@/stores/user'
const userStore = useUserStore()

const props = defineProps({
  status: {
    type: String,
    required: true
  }
})

const router = useRouter()

// 分页参数
const pageSize = 10
const currentPage = ref(1)
const list = ref([])
const loading = ref(false)
const finished = ref(false)
const refreshing = ref(false)
const total = ref(0) // 总条数

// 计算总页数
const getTotalPages = (total, pageSize) => {
  return Math.ceil(total / pageSize)
}

// 获取订单状态文本和样式
const getStatusInfo = (status) => {
  const statusMap = {
    unpaid: { text: '待付款', class: 'unpaid' },
    unserved: { text: '待服务', class: 'unserved' },
    completed: { text: '已完成', class: 'completed' },
    cancelled: { text: '已取消', class: 'cancelled' }
  }
  return statusMap[status] || { text: '未知状态', class: '' }
}
// 订单状态映射
const orderStatusMap = {
  1: { 
    statusText: '待付款',
    statusClass: 'unpaid',
    color: '#ff976a'
  },
  2: { 
    statusText: '待服务',
    statusClass: 'unserved',
    color: '#07c160'
  },
  3: { 
    statusText: '已完成',
    statusClass: 'completed',
    color: '#969799'
  },
  4: { 
    statusText: '已取消',
    statusClass: 'cancelled',
    color: '#969799'
  }
}

// 加载数据
const onLoad = async () => {
  if (loading.value) return // 防止重复加载
  
  try {
    loading.value = true
    const params = {
      userId: JSON.parse(localStorage.getItem('userInfo')).id
    }
    
    // 根据状态添加查询参数
    if (props.status !== 'all') {
      params.orderStatus = Number(props.status)
    }
    
    const res = await orderApi.getOrdersList(params)
    if (res.code === 200) {
      const orderList = res.data.list || []
      
      if (refreshing.value) {
        list.value = orderList
        refreshing.value = false
      } else {
        list.value = [...list.value, ...orderList]
      }

      // 更新加载状态
      loading.value = false
      // 所有数据加载完成
      finished.value = true

      // 更新总数
      total.value = res.data.total || 0
    } else {
      showToast('获取订单列表数据失败')
      finished.value = true
    }
  } catch (error) {
    console.log('获取订单列表数据失败', error)
    showToast('获取订单列表数据失败')
    finished.value = true
  } finally {
    loading.value = false
  }
}

// 下拉刷新处理
const onRefresh = () => {
  // 重置所有状态
  finished.value = false
  currentPage.value = 1
  total.value = 0
  list.value = [] // 清空列表
  refreshing.value = true
  onLoad()
}

// 查看订单详情
const goToDetail = (order) => {
  router.push({
    path: '/order/detail',
    query: {
      orderData: encodeURIComponent(JSON.stringify(order))
    }
  })
}


//去评价
const formData = ref('')
const evaluate = ref('')
const evaluateOrderId = ref(null)
const showEvaluate = ref(false)
const goToEvaluate = (item) =>{
  const fields = item.businessContent.split(',');
  for (const field of fields) {
    if (field.startsWith('evaluate:')) {
      const parts = field.split(':');
      if (parts.length > 1 && parts[1].trim()) {
        showToast('您已参评，请勿重复评价')
        return
      }
      break;
    }
  }

  formData.value = item.businessContent
  evaluateOrderId.value = item.id
  showEvaluate.value = true
}
const onSubmitEvaluate = async () => {
  if(!evaluate.value){
    return
  }
  evaluate.value = formData.value + ',' + 'evaluate:' + evaluate.value
  try{
  let params = {
    id:evaluateOrderId.value,
    businessContent:evaluate.value
  }
  const res = await orderApi.updateOrder(params)
  if(res.code === 200){
    showToast('感谢您的评价')
      evaluate.value = ''
      formData.value = ''
      evaluateOrderId.value = ''
      onRefresh()
  }
}catch(error){
  showToast(error)
}
}

// 取消订单
const cancelOrder = async (order) => {
  try {
    await showConfirmDialog({
      title: '取消订单',
      message: '确定要取消该订单吗？'
    })
    // TODO: 调用取消订单接口
    console.log('取消订单:', order.id)
    let params = {
      id:order.id,
      status:4
    }
    const res = await orderApi.updateOrderStatus(params)
    if(res.code === 200){
      showToast('取消订单成功')
      onRefresh()
    }else {
      showToast('取消订单失败')
    }
  } catch (error) {
    showToast('取消订单失败')
    console.log('用户取消操作')
  }
}

//修改订单
const showUpdate = ref(false)
const showDatePicker = ref(false)
const showTimePicker = ref(false)
const minDate = new Date()
const maxDate = new Date(Date.now() + 30 * 24 * 60 * 60 * 1000)
const showEscortTypePicker = ref(false)
const escortTypeColumns = ref([
  {
    text:' 基础生活护理',
    value:' 基础生活护理'
  },
  {
    text:' 医疗护理',
    value:' 医疗护理'
  },
  {
    text:' 心理支持',
    value:' 心理支持'
  },
  {
    text:' 特殊护理',
    value:' 特殊护理'
  },
  {
    text:' 家庭支持',
    value:' 家庭支持'
  },
  {
    text:' 上门打针',
    value:' 上门打针'
  },
  {
    text:' 健康教育与指导',
    value:' 健康教育与指导'
  },
])
const onDateConfirm = (value) => {
  form.value.visitDate = formatDate(value)
  showDatePicker.value = false
}
const onTimeConfirm = (value) => {
  form.value.visitTime = formatTime(value)
  showTimePicker.value = false
}
const onEscortTypeConfirm = (item) => {
  if(item.selectedValues[0]){
    showToast({
      message: '请在备注里填写服务要求或联系执行服务人员进行沟通',
      duration: 5000
    })
  }
  form.value.escortType = item.selectedValues[0]
  showEscortTypePicker.value = false
}
// 格式化日期
const formatDate = (date) => {
  const year = String(date.selectedValues[0])
  const month = String(date.selectedValues[1])
  const day = String(date.selectedValues[2])
  return `${year}-${month}-${day}`
}
// 格式化时间
const formatTime = (time) => {
  const hour = String(time.selectedValues[0])
  const minutes = String(time.selectedValues[1])
  return `${hour}:${minutes}`
}
const form = ref({})
const updateOrder = (item) =>{
  let params = {
    value:item
  }
  form.value = parseBusinessContent(params).value
  showUpdate.value = true
}
const onSubmit = async ()  => {
  try{
  // if(form.value.serviceName === '就医陪诊' && form.value.address && form.value.visitDate && form.value.visitTime){
  //   form.value.businessContent = 'address:' + form.value.address + ',' + 'visitDate:' + form.value.visitDate + ',' + 'visitTime:' + form.value.visitTime  + ',' + 'servicePersonneAge:' + form.value.servicePersonneAge
  // }else if(form.value.serviceName === '诊前约号' && form.value.visitDate && form.value.visitTime && form.value.departmentName && form.value.doctorName){
  //   form.value.businessContent = 'departmentName:' + form.value.departmentName + ',' + 'doctorName:' + form.value.doctorName + ',' + 'visitDate:' + form.value.visitDate + ',' + 'visitTime:' + form.value.visitTime  + ',' + 'servicePersonneAge:' + form.value.servicePersonneAge
  // }else if(form.value.serviceName === '送取就医结果' && form.value.idNumber && form.value.medicalCardNumber && form.value.address){
  //   form.value.businessContent = 'idNumber:' + form.value.idNumber + ',' + 'medicalCardNumber:' + form.value.medicalCardNumber + ',' + 'address:' + form.value.address  + ',' + 'servicePersonneAge:' + form.value.servicePersonneAge
  // }else if (form.value.serviceName === '代跑取药' && form.value.result && form.value.deliveryCode && form.value.idNumber && form.value.medicalNumber && form.value.address){
  //   form.value.businessContent = 'result:' + form.value.result + ',' + 'deliveryCode:' + form.value.deliveryCode + ',' + 'idNumber:' + form.value.idNumber + ',' + 'medicalNumber:' + form.value.medicalNumber + ',' + 'address:' + form.value.address  + ',' + 'servicePersonneAge:' + form.value.servicePersonneAge
  // }else if(form.value.serviceName === '上门陪护' && form.value.escortType && form.value.address){
  //   form.value.businessContent = 'escortType:' + form.value.escortType + ',' +'address:' + form.value.address  + ',' + 'servicePersonneAge:' + form.value.servicePersonneAge
  // }
  form.value = filterEmptyFields(form.value)
  console.log('提交订单:', form.value)
  let params = {
    id:form.value.id,
    serviceObject:form.value.serviceObject,
    serviceObjectPhone:form.value.serviceObjectPhone
    // businessContent:form.value.businessContent,
    // remark:form.value.remark
  }
  params = filterEmptyFields(params)
  const res = await orderApi.updateOrder(params)
  if(res.code === 200){
    showToast('修改订单信息成功')
    onRefresh()
  }else{
    showToast('修改订单信息成功失败')
  }
  } catch(error) {
    console.error('修改订单信息成功失败：', error)
    showToast('修改订单信息成功失败')
  }
  showUpdate.value = false
}
const filterEmptyFields = (data) => {
  const filteredData = {};

  for (const key in data) {
    if (data[key] !== null && data[key] !== undefined && data[key] !== '' && data[key] !== "") {
      filteredData[key] = data[key];
    }
  }

  return filteredData;
};



// 支付订单
const showPayPassowrd = ref(false)
const payPassword = ref('')
const showKeyboard = ref(true)
const orderHospitalName = ref('')//支付医院名称
const orderAmount = ref('')//支付订单金额
const payOrderId = ref(null)

const showPayOrder = (order) => {
  orderHospitalName.value = order.hospitalName
  orderAmount.value = order.orderAmount
  payOrderId.value = order.id
  showPayPassowrd.value = true
}

const payOrder = async () => {
  try {
    let params = {
      orderId: Number(payOrderId.value),
      payPassword: payPassword.value
    }
    const res = await orderApi.payOrder(params) 
    if (res.code === 200) {
      // 清理支付相关状态
      payOrderId.value = null
      payPassword.value = ''
      orderHospitalName.value = ''
      showPayPassowrd.value = false
      showToast('支付成功')
      // 延迟一下再重新加载数据，确保状态已经完全重置
      setTimeout(() => {
        onRefresh()
      }, 100)
      
      // 通知父组件刷新
      emit('refresh')
    } else {
      payOrderId.value = null
      payPassword.value = ''
      orderHospitalName.value = ''
      showPayPassowrd.value = false
      showToast(`支付失败,${res.message}`)
    }
  } catch (error) {
    payOrderId.value = null
    payPassword.value = ''
    orderHospitalName.value = ''
    showPayPassowrd.value = false
    console.log('支付失败', error)
    showToast(`支付失败,${error}`)
  }
}

// 添加 emit 定义
const emit = defineEmits(['refresh'])

watch(payPassword, (newValue) => {
  if (newValue && newValue.length === 6) {
    console.log('payPassword', newValue)
    payOrder()
  }
});





















// 拨打电话
const makeCall = async (item) => {
  let serviceStaffName = item.serviceStaffName
  console.log('serviceStaffName',serviceStaffName)
  await showConfirmDialog({
      title: '拨打电话',
      message: `确定要联系本次服务专员${serviceStaffName}吗`
    })
  window.location.href = 'tel:' + item.serviceStaffPhone
}

//完成服务
const ompleteOrder = async (order) => {
  try {
    await showConfirmDialog({
      title: '完成服务',
      message: '确定该服务已完成？'
    })
    // TODO: 调用取消订单接口
    let params = {
      id:order.id,
      status:3
    }
    const res = await orderApi.updateOrderStatus(params)
    if(res.code === 200){
      showToast('订单服务完成')
      onRefresh()
    }else {
      showToast('订单服务完成异常')
    }
  } catch (error) {
    console.log('订单服务完成异常')
  }
}

// 查看服务
const viewService = (order) => {
  console.log('order',order)
  // router.push({
  //   path: '/order/server',
  //   query: { id: order.id }
  // })
}

// 删除订单
const deleteOrder = async (order) => {
  try {
    await showConfirmDialog({
      title: '删除订单',
      message: '确定要删除该订单？'
    })
    // TODO: 调用取消订单接口
    let params = {
      id:order.id,
    }
    const res = await orderApi.deleteOrder(params)
    if(res.code === 200){
      showToast('删除订单成功')
      onRefresh()
    }else {
      showToast('删除订单失败')
    }
  } catch (error) {
    showToast('删除订单失败')
    console.log('删除订单失败')
  }
}

// 监听状态变化
watch(() => props.status, (newStatus) => {
  if (newStatus) {
    // 重置所有状态
    list.value = []
    loading.value = false
    finished.value = false
    onLoad()
  }
}, { immediate: true })
</script>

<style lang="scss" scoped>
.order-list {
  padding: 16px;
  margin-bottom: 40px;
  .order-items {
    .order-item {
      margin-bottom: 16px;
      background: #fff;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
      transition: all 0.3s;

      .order-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 16px;
        border-bottom: 1px solid var(--border-color);

        .order-no {
          font-size: 14px;
          color: var(--text-color-secondary);
        }

        .order-status {
          font-size: 14px;
          font-weight: 500;
        }
      }

      .order-content {
        padding: 16px;
        cursor: pointer;
        display: flex;
        align-items: center;
        
        .hospital-info {
          display: flex;
          align-items: center;
          flex: 1;

          .service-image {
            width: 48px;
            height: 48px;
            border-radius: 8px;
            margin-right: 12px;
            object-fit: cover;
          }

          .service-details {
            h4 {
              margin: 0 0 4px;
              font-size: 16px;
              color: var(--text-color);
            }

            p {
              margin: 0;
              font-size: 14px;
              color: var(--text-color-secondary);
            }
          }
        }

        .price-info {
          margin-top: 12px;
          text-align: right;

          .price {
            font-size: 18px;
            font-weight: 500;
            color: #ee0a24;

            &::before {
              content: '¥';
              font-size: 14px;
            }
          }
        }
      }

      .order-footer {
        display: flex;
        justify-content: flex-end;
        gap: 12px;
        padding: 12px 16px;
        border-top: 1px solid var(--border-color);

        .van-button {
          min-width: 88px;
          height: 32px;
          // border-radius: 16px;
          font-size: 13px;
        }
      }
    }
  }

  .empty-state {
    padding: 40px 0;
  }

  .loading-text {
    text-align: center;
    color: var(--text-color-secondary);
    padding: 10px 0;
    font-size: 14px;
    transition: opacity 0.3s;
  }
  .pay-title{
    margin-left: 115px;
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: 800
  }
  .pay-title-tip{
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: 800
  }
}
</style> 